<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-09-01
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2024-03-05
 * @FilePath: /element-admin/src/views/FoodCalDinnerTab.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="Cust-Dinner-page">
    <!--顶部搜索栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <el-form :inline="true" :model="query" class="demo-form-inline">
            <el-form-item>
              <el-button type="primary" plain @click="handleFetch" size="small">刷新</el-button>
            </el-form-item>
            <el-form-item>
              <el-form-item label="餐食索引">
                <el-select v-model="query.dayIdx" placeholder="餐食批次" size="small">
                  <el-option label="请选择餐食索引" value=-1></el-option>
                  <el-option v-for="item in dinner_days_opts" v-bind:key="item.value" :data="item"
                             :label="item.label"
                             :value=item.value></el-option>
                </el-select>
              </el-form-item>
            </el-form-item>
            <el-form-item>
              <el-form-item label="会员">
                <el-input v-model="query.key" placeholder="会员" size="small"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" plain @click="dialogView=true" size="small">选择会员</el-button>
              </el-form-item>
            </el-form-item>
            <el-form-item label="打印日期">
              <div class="block">
                <el-date-picker v-model="query.printDay" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH"></el-date-picker>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" plain @click="handleSupplyPrinting" size="big">打印</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!--中部数据表格栏-->
    <div class="col-md-12" style="margin-bottom: 15px">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <el-input v-model="query.printMemData"
              type="textarea" readonly
                    rows="10"
              show-word-limit>
          </el-input>
        </el-col>
      </el-row>
    </div>
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <div class="mainTabTable">
            <span v-if="false">{{ FoodCalDayList }}</span>
            <el-table :data="FoodCalDayList"
                      :cell-style="{padding:'5px'}"
                      :key="isIndex" v-loading="isLoading" border
                      stripe row-key="id">
              <el-table-column v-if="isIndex == 1" type="index" label="天数" width="75" fixed></el-table-column>
              <!-- --------------------------------------------------------------------------------------------- 早餐 -->
              <el-table-column prop="list" label="早餐">
                <template v-slot="scope">
                  <span v-for="item in scope.row.list.zaocan.protein" v-bind:key="item.name">
                    <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS"
                                     :content-style="CS">
                    <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                    <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                    <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                    </el-descriptions>
                  </span>
                  <span v-for="item in scope.row.list.zaocan.vitamin" v-bind:key="item.name">
                    <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS"
                                     :content-style="CS">
                    <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                    <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                    <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                    </el-descriptions>
                  </span>
                  <span v-for="item in scope.row.list.zaocan.carbonWater" v-bind:key="item.name">
                    <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS"
                                     :content-style="CS">
                    <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                    <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                    <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                    </el-descriptions>
                  </span>
                  <span v-for="item in scope.row.list.zaocan.fat" v-bind:key="item.name">
                    <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS"
                                     :content-style="CS">
                    <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                    <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                    <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                    </el-descriptions>
                  </span>
                </template>
              </el-table-column>
              <!-- --------------------------------------------------------------------------------------------- 午餐 -->
              <el-table-column prop="list" label="午餐">
                <template v-slot="scope">
                  <span v-for="item in scope.row.list.wucan.protein" v-bind:key="item.name">
                    <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS"
                                     :content-style="CS">
                    <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                    <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                    <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                    </el-descriptions>
                  </span>
                  <span v-for="item in scope.row.list.wucan.vitamin" v-bind:key="item.name">
                    <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS"
                                     :content-style="CS">
                    <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                    <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                    <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                    </el-descriptions>
                  </span>
                  <span v-for="item in scope.row.list.wucan.carbonWater" v-bind:key="item.name">
                    <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS"
                                     :content-style="CS">
                    <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                    <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                    <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                    </el-descriptions>
                  </span>
                  <span v-for="item in scope.row.list.wucan.fat" v-bind:key="item.name">
                    <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS"
                                     :content-style="CS">
                    <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                    <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                    <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                    </el-descriptions>
                  </span>
                </template>
              </el-table-column>
              <!-- --------------------------------------------------------------------------------------------- 晚餐 -->
              <el-table-column prop="list" label="晚餐">
                <template v-slot="scope">
                  <span v-for="item in scope.row.list.wancan.protein" v-bind:key="item.name">
                    <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS"
                                     :content-style="CS">
                    <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                    <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                    <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                    </el-descriptions>
                  </span>
                  <span v-for="item in scope.row.list.wancan.vitamin" v-bind:key="item.name">
                    <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS"
                                     :content-style="CS">
                    <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                    <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                    <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                    </el-descriptions>
                  </span>
                  <span v-for="item in scope.row.list.wancan.carbonWater" v-bind:key="item.name">
                    <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS"
                                     :content-style="CS">
                    <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                    <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                    <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                    </el-descriptions>
                  </span>
                  <span v-for="item in scope.row.list.wancan.fat" v-bind:key="item.name">
                    <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS"
                                     :content-style="CS">
                    <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                    <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                    <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                    </el-descriptions>
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 会员选择查询对话框 -->
    <div>
      <MemberFetchDialog ref="memberFetchRef" :dialogId="dialogView" @fMethod="handleMemFetchDialog"></MemberFetchDialog>
    </div>
  </div>

</template>
<script>
import {mapMutations} from "vuex";
import {loadCustDinner} from "@/api/CustDinnerApi";
import {extSupplyPrinting} from "@/api/MemberWeight";
import MemberFetchDialog from "@/views/members/memberDrawer/MemberFetchDialog.vue"

export default {
  name: "SupplyPrintingView",
  components: {MemberFetchDialog},
  data() {
    return {
      isIndex: 1,
      isLoading: false,
      LS: {
        "text-align": "left",
        "min-width": "50px",
        "word-break": "keep-all"
      },
      CS: {
        "min-width": "100px",
        "max-width": "300px",
        "word-break": "break-all"
      },
      dinner_days_opts: [
        {"label": 1, "value": "1", "key": 1},
        {"label": 2, "value": "2", "key": 2},
        {"label": 3, "value": "3", "key": 3},
        {"label": 4, "value": "4", "key": 4},
        {"label": 5, "value": "5", "key": 5},
        {"label": 6, "value": "6", "key": 6},
        {"label": 7, "value": "7", "key": 7}
      ],
      query: {
        key: '',
        dayIdx: null,
        printDay: null,
        printMemData: null
      },
      dialogView: false,
      tableHeight: 650,
      FoodCalDayList: [],
    }
  },
  props: {},
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    init_obj() {
      return {
        FoodCalDayList: [],
      }
    },
    handle_init() {
      this.init_obj();
    },
    handleFetch() {
      this.init_obj();
      this.isLoading = true;
      loadCustDinner(this.query).then(res => {
        if (res.code == 200) {
          this.isLoading = false;
          this.FoodCalDayList = res.data;
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    handleMemFetchDialog(r) {
      this.dialogView = null;
      let aa = []
      if (r["choosedMems"].length > 0) {
        r["choosedMems"].forEach((t) => {
          aa.push({member_id: t["member_id"], name: t["name"], sex: t["sex"], member_sno: t["member_sno"],});
        });
      }
      this.query.printMemData = JSON.stringify(aa);
      this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
    },
    async handleSupplyPrinting(){
      // this.isLoading = true;
      const h = this.$createElement;
      if (this.query.printDay == null) {
        this.isLoading = false;
        this.$notify({ title: '警告', message: h('i', { style: 'color: teal'}, '请选择补充打印日期'), type: 'warning' });
        return
      }
      if (this.query.dayIdx == null) {
        this.isLoading = false;
        this.$notify({ title: '警告', message: h('i', { style: 'color: teal'}, '请选择补充打印餐食'), type: 'warning' });
        return
      }
      if (this.query.printMemData == null) {
        this.isLoading = false;
        this.$notify({ title: '警告', message: h('i', { style: 'color: teal'}, '请添加补充打印用户'), type: 'warning' });
        return
      }
      await extSupplyPrinting({data:this.query}).then(res => {
        if (res.code == 200) {
          this.isLoading = false;
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    }
  },
  created() {
    this.handle_init();
  },
  mounted() {
  }
}
</script>
<style scoped>
.mainTabTable {
  overflow-x: hidden;
  overflow-y: auto;
  /*height: 1450px*/
}
</style>